import React from 'react';
import { Layout } from 'antd';
import Header from './components/Header';
import Tools from './components/Tools';
import ProductList from './components/ProductList';
import SummaryArea from './components/Summary';
import './styles.css';

const App = () => {
  const {
    productCount,
    totalPrice,
    handleAddProduct,
    clearCart,
    render: productListRender,
  } = ProductList();

  return (
    <Layout className="app-layout">
      <Header />

      <div className="main-content">
        <div className="main-left">
          <div className="left-content module">
            {productListRender}
          </div>
          <div className="left-footer module">
            <Tools handleAddProduct={handleAddProduct} />
          </div>
        </div>
        <div className="main-right module">
          <SummaryArea productCount={productCount} totalPrice={totalPrice} onClearCart={clearCart} />
        </div>
      </div>
    </Layout>
  );
};

export default App;